<template name="areas">
	<view>
		
		<cu-custom :bgColor="'bg-'+$themeColor()">
			<block slot="content">小区</block>
		</cu-custom>
		
		
		<view :class="'bg-'+$bgColor()">
			
			<view class="padding flex bg-white">
				<picker @change="PickerChange" :value="index" :range="picker">
					<view class="picker margin-right margin-top flex-sub radius">
						{{index>-1?picker[index]:'全部'}} <text class="lg text-gray cuIcon-unfold"></text>
					</view>
				</picker>
				<uni-search-bar radius="100" class="flex-treble radius " placeholder="搜索" @confirm="search" />
			</view>
			
			
			<view class="cu-bar bg-blue solid-bottom margin-top">
				<view class="action">
					<text class=" "></text> 小区名称
				</view>
				<view class="action">
					<text class=" "></text> 状态
				</view>
			</view>
			
			<view class="cu-list menu sm-border  ">
				<view class="cu-item " :style="index%2==0?'background-color:#ffffff':'background-color:#cdcdcd'" v-for="(area,index) in areaList"
				 :key="index" @click="setAreaInfo(area.areaId)">
					<view class="content">
						<text class="text-grey ">{{area.areaName}}</text>
					</view>
					<view class="action">
						<view class="cu-tag round bg-orange light">正常</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="margin-top">
			<uni-pagination :show-icon="true" :total="total" title="标题文字" @change="changePage" />
		</view>
		
		<view class="cu-tabbar-height"></view>
		
	</view>
</template>

<script>
	import uniSearchBar from '@/components/uni-search-bar/uni-search-bar.vue'
	import uniSection from '@/components/uni-section/uni-section.vue'
	import uniPagination from '@/components/uni-pagination/uni-pagination.vue'
	export default {
		data() {
			return {
				index: -1,
				searchWord:'',
				district:'',
				picker: ['福田区', '南山区', '罗湖区'],
				areaList: [],
				triggered: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				loadingText: '加载中',
				// current: 1,
				pageNum: 1,
				pageSize: 10,
				total: 50
			}
		},
		mounted() {
			// 初始化加载
			console.log("mounted")
			this.getAreaList();
		},
		methods: {
			PickerChange(e) {
				this.index = e.detail.value
				// this.district = '';
				this.getAreaList();
			},
			search(res) {
				this.searchWord = res.value;
				this.getAreaList();
			},
			getAreaList() {
				
				const data = {
					pageNum:this.pageNum,
					pageSize:this.pageSize,
					areaName:this.searchWord,
					district:this.district
				};
				this.$httpPost('/system/area/list',data).then(res=>{
					// console.log(res.data.rows)
					this.areaList = res.data.rows
					this.total = res.data.total
				})
			},
			changePage(e) {
				this.pageNum = e.current;
				this.getAreaList();
			},
			setAreaInfo(e) {
				uni.navigateTo({
					url: "/pages/areas/info?id="+e,
				})
			},
		}
	}
</script>

<style>

</style>
